<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <link rel="stylesheet" href="./src/style.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Dissolve-Effect</title>
  </head>
  <body class="loading">
     <header class="fixed top-0 left-0 w-full pointer-events-none z-50">
      <div class="absolute top-0 left-0 p-4 pointer-events-auto">
        <h1 class="text-white font-bold text-lg">Dissolve Effect</h1>
        <nav class="flex flex-wrap gap-4 mt-2 max-sm:w-[150px]">
          <a class="text-white font-bold" href="https://tympanus.net/codrops/?p=">Tutorial</a>
          <a class="text-white font-bold" href="https://github.com/JatinChopra/emissive-dissolve-effect">GitHub</a>
          <a class="text-white font-bold" href="https://tympanus.net/codrops/demos/">All demos</a>
        </nav>
      </div>
    </header>
    <canvas id="c" class="z-0"></canvas>
    <script type="module" src="/src/main.ts"></script>
     <footer class="fixed bottom-0 left-0 w-full pointer-events-none z-50">
      <div class="absolute bottom-0 left-0 p-4 pointer-events-auto z-2">
        <nav class="flex flex-wrap gap-2">
          <a class="text-white" href="https://tympanus.net/codrops/demos/?tag=glsl">#glsl</a>
          <a class="text-white" href="https://tympanus.net/codrops/demos/?tag=three-js">#three.js</a>
          <a class="text-white" href="https://tympanus.net/codrops/demos/?tag=webgl">#webgl</a>
        </nav>
      </div>
    </footer>
  </body>
</html>
